<template>
	<zh-sheet :transprent="props.transprent" :margin="props.margin" :padding="props.padding">
		<zh-sheet :margin="[0, 0]" :padding="[0, 0]" :transprent="props.transprent" :round="props.round"
			:text="props.text" :color="_color">
			<view class="flex-row-center-end" style="width: 100%" :style="{ 'min-height': props.height + 'rpx' }">
				<view class="pl-10" style="width: 100%" :style="{ 'min-height': props.height + 'rpx' }"
					:class="props.inputAlign === 'left' ? 'flex-row-center-start' : 'flex-row-center-end'"
					@click="onClick">
					<zh-text unit="px" :color="allAttrs.disabled ? '#8799a3' : propsDetail.fontColor"
						:font-size="propsDetail.fontSize_px" v-if="_strvalue" :label="_strvalue"></zh-text>
					<zh-text unit="px" :color="allAttrs.disabled ? '#8799a3' : propsDetail.fontColor"
						:font-size="propsDetail.fontSize_px" v-if="_timevalue" :label="_timevalue"></zh-text>
					<zh-text color="#9E9E9E" unit="px" :font-size="propsDetail.fontSize_px" v-if="!_strvalue"
						:label="props.placeholder"></zh-text>
				</view>
				<tm-icon v-if="!allAttrs.disabled && props.showClear && _value" class="pl-10"
					:font-size="props.fontSize" name="tmicon-times-circle-fill" @click="onclear"> </tm-icon>
				<tm-icon class="pl-10 pr-2" :font-size="props.fontSize" name="tmicon-angle-right"
					:color="allAttrs.disabled ? '#8799a3' : propsDetail.fontColor" @click="onClick">
				</tm-icon>
			</view>
		</zh-sheet>
		<zh-pretty-times v-if="props.model === 'prettyTime'" v-model:show="show" v-model="_value" :height="propsDetail.drawerHeight"
			v-model:endValue="_endValue" v-model:model-str="_strvalue" :itemHeight="props.itemHeight" :max="props.max"
			:showBeforTime="props.showBeforTime" :isQuantum="props.isQuantum" :disableText="props.disableText"
			:fullText="props.fullText" :undisableText="props.undisableText" :timeInterval="props.timeInterval"
			:color="props.dateColor" :start="props.start" :end="props.end" :fullTimeSlot="props.fullTimeSlot"
			:disabledDate="props.disabledDate" :showDateFormat="props.showDateFormat" @confirm="confirm"
			@change="change"></zh-pretty-times>

		<zh-time-picker v-else-if="props.model === 'time'" v-model:show="show" :showDetail="_showDetail" :height="propsDetail.drawerHeight"
			v-model="_value" v-model:model-str="_strvalue" :defaultValue="_value" :disabledDate="props.disabledDate"
			:round="props.round" :showSuffix="_showSuffix" :color="props.dateColor" :linear="props.linear"
			:linearDeep="props.linearDeep" :start="props.start" :showFormat="props.showFormat" @confirm="confirm"
			:end="props.end"></zh-time-picker>
		<datePanelVue v-else v-model:show="show" v-model="_value" :model="props.model" :round="props.round" :height="propsDetail.drawerHeight"
			:hideTool="props.hideTool" :color="props.dateColor" :linear="props.linear" :linearDeep="props.linearDeep"
			:start="props.start" :end="props.end" :disabledDate="props.disabledDate" :multiple="props.multiple"
			:dateStyle="props.dateStyle" :showDetail="_showDetail" @confirm="confirm" :max="props.max"
			:showFormat="props.showFormat" :format="props.format" :showDateFormat="props.showDateFormat"
			:showTimeFormat="props.showTimeFormat"></datePanelVue>
	</zh-sheet>
</template>

<script lang="ts" setup>
	import { ref, watch, useAttrs, computed, PropType, watchEffect } from 'vue';
	import { custom_props } from '@/tool/lib/minxs';
	import { dateItemStyle } from '../zh-calendar-view/interface';
	import datePanelVue from './date-panel.vue';
	import * as dayjs from 'dayjs/esm/index';
	import systemConfigStore from '@/store/modules/systemConfigStore';
	const store = systemConfigStore();

	const DayJs = dayjs.default;
	const attrs = useAttrs();
	const emits = defineEmits(['focus', 'blur', 'confirm', 'input', 'update:modelValue', 'update:modelStr', 'clear', 'change', 'click', 'cancel', 'open', 'update:endValue']);
	const props = defineProps({
		...custom_props,
		fullTimeSlot: {
			// 预约开始和结束时间，显示预满时间段
			type: Array,
			default() {
				return [];
			},
		},
		//是否显示当前时间之前的时间
		showBeforTime: {
			type: Boolean,
			default: false,
		},
		//预约时间段
		isQuantum: {
			type: Boolean,
			default: true,
		},

		disableText: {
			//禁用显示的文本
			type: String,
			default: '休息中',
		},
		fullText: {
			//约满显示的文本
			type: String,
			default: '已约满',
		},
		undisableText: {
			//未禁用显示的文本
			type: String,
			default: '可预约',
		},
		timeInterval: {
			// 时间间隔，分钟为单位
			type: Number,
			default: 30,
		},
		itemHeight: {
			type: [Number, String],
			default: 180,
		},
		placeholder: {
			type: String,
			default: '请选择日期',
		},
		//默认的聚集状态
		focus: {
			type: Boolean,
			default: false,
		},
		showClear: {
			type: Boolean,
			default: true,
		},
		height: {
			type: Number,
			default: 64,
		},
		margin: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0],
		},
		padding: {
			type: Array as PropType<Array<number>>,
			default: () => [0, 0],
		},
		text: {
			type: Boolean,
			default: true,
		},
		inputAlign: {
			type: String,
			default: '',
		},
		fontSize: {
			type: Number,
			default: 30,
		},
		/**
		 * 数组
		 */
		defaultValue: {
			type: [String, Number, Date, Array as PropType<Array<String | Number | Date>>],
			default: () => [],
		},
		//prettyTime 预约模式 dateTime 日期+时间模式
		model: {
			type: String as PropType<'quarter' | 'day' | 'month' | 'year' | 'rang' | 'week' | 'dateTime' | 'time' | 'prettyTime'>,
			default: 'day',
		},
		modelValue: {
			type: [String, Number, Date, Array as PropType<Array<String | Number | Date>>],
			default: () => [],
		},
		endValue: {
			type: [String],
			default: undefined,
		},
		//单向绑定输入展示日期，此字段用来在页面上展示。只向外输出。
		//功能目的：用来在页面上显示，特别是在input上绑定显示非常方便。
		//标准数据保存时，请使用modelValue保存，而不是此值。
		modelStr: {
			type: String,
			default: '',
		},
		color: {
			type: String,
			default: 'grey-darken-2',
		},
		dateColor: {
			type: String,
			default: 'primary',
		},
		linear: {
			type: String,
			default: '',
		},
		linearDeep: {
			type: String,
			default: 'light',
		},
		//指的是：有效的可选时间，小于此时间，不允许选中。
		start: {
			type: [String, Number, Date],
			default: undefined,
		},
		//指的是：有效的可选时间，大于此时间，不允许选中。
		end: {
			type: [String, Number, Date],
			default: undefined,
		},

		/** 日历组件属性 */

		//被禁用的日期数组。如果["2022-1-1","2022-5-1"]
		//被禁用的日期将无法选中。
		disabledDate: {
			type: Array as PropType<Array<String | Number | Date>>,
			default: () => [],
		},
		//是否允许多选。
		multiple: {
			type: Boolean,
			default: false,
		},
		//设定单个日期的样式。
		dateStyle: {
			type: Array as PropType<Array<dateItemStyle>>,
			default: () => [],
		},
		/** 日历组件属性结束 */
		round: {
			type: Number,
			default: 3,
		},
		//隐藏头部操作栏
		hideTool: {
			type: Boolean,
			default: false,
		},
		extend: {
			// 扩展属性，对象形式，存放组件的扩展属性
			type: Object,
			default: () => {
				return {};
			},
		},
		//显示日期格式
		showFormat: {
			type: String,
			default: null,
		},
		//modelValue的日期格式
		format: {
			type: String,
			default: null,
		},
		//显示日期时间格式是日期格式
		showDateFormat: {
			type: String,
			default: 'YYYY年MM月DD日',
		},
		//显示日期时间格式是时间格式
		showTimeFormat: {
			type: String,
			default: 'HH:mm:ss',
		},
		//model为time模式的时候，可选择的内容，默认为时分秒
		showDetail: {
			type: Object,
			default: () => {
				return { year: true, month: true, day: true, hour: true, minute: true, second: true };
			},
		},
		showSuffix: {
			type: Object,
			default: () => {
				return { year: '年', month: '月', day: '日', hour: '时', minute: '分', second: '秒' };
			},
		},
	});
	const allAttrs = computed(() => {
		return Object.assign(props.extend, attrs);
	});
	const _showDetail = computed(() => Object.assign({ year: false, month: false, day: false, hour: true, minute: true, second: true }, props.showDetail));
	const _height = computed(() => (store.uiStyle === 'elder' ? props.height + 20 : props.height));
	const propsDetail = computed(() => {
		const systemInfo=uni.getSystemInfoSync();
		const windowHeight = systemInfo.windowHeight;
		let drawerHeight=0;
		if(store.orientation === 'landscape'){
			drawerHeight=(windowHeight/(uni.upx2px(100)/100))-20;
		}else{
			drawerHeight=(windowHeight/(uni.upx2px(100)/100))-200;
		}
		
		if (props.model == 'day' || props.model == 'datetime')  {
			if(drawerHeight>950){
				drawerHeight=950;
			}
		}else if (props.model == 'rang') {
			if(drawerHeight>950){
				drawerHeight=950;
			}
		}else if (props.model == 'week') {
			if(drawerHeight>800){
				drawerHeight=800;
			}
		}else if (props.model == 'month') {
			if(drawerHeight>800){
				drawerHeight=800;
			}
		}else if (props.model == 'quarter') {
			if(drawerHeight>800){
				drawerHeight=800;
			}
		}else if (props.model == 'year') {
			if(drawerHeight>800){
				drawerHeight=800;
			}
		}else if(props.model === 'prettyTime'){
			
		}else{
			if(drawerHeight>950){
				drawerHeight=950;
			}
		}
		console.log(drawerHeight)
		return {
			...props,
			drawerHeight:drawerHeight,
			fontColor: allAttrs.value.disabled ? '#8799a3' : props.fontColor || props.color,
			fontSize_px: uni.upx2px(props.fontSize),
		};
	});
	const _showSuffix = computed(() => Object.assign({ year: '年', month: '月', day: '日', hour: '时', minute: '分', second: '秒' }, props.showSuffix));
	const _value = ref(props.modelValue);
	const _endValue = ref(props.endValue);
	const _strvalue = ref(props.modelStr);
	const _timevalue = ref('');
	onMounted(() => {
		if (props.model === 'prettyTime') {
			if (props.modelValue && props.endValue && props.isQuantum) {
				_strvalue.value = DayJs(props.modelValue).format(props.showDateFormat ? props.showDateFormat : 'YYYY年MM月DD日');
				let strVal = DayJs(props.modelValue).format('HH:mm') + '~' + DayJs(props.endValue).format('HH:mm');
				_timevalue.value = strVal;
			} else {
				if (props.modelValue) {
					_strvalue.value = DayJs(props.modelValue).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日 HH:mm:ss');
				}

				_timevalue.value = '';
			}
		} else {
			if (props.modelValue && Array.isArray(props.modelValue)) {
				let strList = props.modelValue.map((item) => {
					return DayJs(item).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日');
				});
				if (props.multiple) {
					_strvalue.value = strList.join(',');
				} else {
					_strvalue.value = strList.join('~');
				}
			} else {
				if (props.modelValue) {
					if (props.model === 'datetime') {
						_strvalue.value = DayJs(props.modelValue).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日 HH:mm:ss');
					} else {
						_strvalue.value = DayJs(props.modelValue).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日');
					}
				}
			}
		}
	});
	let tmid : any = NaN;
	function onClick() {
		if (allAttrs.value.disabled) {
			return;
		}
		clearTimeout(tmid);
		tmid = setTimeout(() => {
			show.value = true;
		}, 30);
	}
	function change(e : Object) {
		emits('change', e);
	}
	const show = ref(false);
	const isConfirm = ref(false); //是否点了确认按钮。
	//是否聚焦中。
	const _foucsActive = ref(props.focus || false);
	watch(
		() => props.focus,
		() => {
			_foucsActive.value = props.focus;
		}
	);
	const _color = computed(() => {
		let color = props.color;
		if (_foucsActive.value) {
			if (props.followTheme && store.color) {
				color = store.color;
			} else {
				color = props.focusColor;
			}
		}
		return color;
	});

	watch(
		() => props.modelValue,
		() => {
			console.log(props.modelValue);
			_value.value = props.modelValue;
			if (props.modelValue && Array.isArray(props.modelValue)) {
				let strList = props.modelValue.map((item) => {
					return DayJs(item).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日');
				});
				if (props.multiple) {
					_strvalue.value = strList.join(',');
				} else {
					_strvalue.value = strList.join('~');
				}
			} else {
				if (props.modelValue) {
					if (props.model === 'prettyTime') {
						if (props.endValue && props.isQuantum) {
							_strvalue.value = DayJs(props.modelValue).format(props.showDateFormat ? props.showDateFormat : 'YYYY年MM月DD日');
							let strVal = DayJs(props.modelValue).format('HH:mm') + '~' + DayJs(props.endValue).format('HH:mm');
							_timevalue.value = strVal;
						} else {
							_strvalue.value = DayJs(props.modelValue).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日 HH:mm:ss');
							_timevalue.value = '';
						}
					} else if (props.model === 'datetime') {
						_strvalue.value = DayJs(props.modelValue).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日 HH:mm:ss');
					} else {
						_strvalue.value = DayJs(props.modelValue).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日');
					}
				}
			}
		},
		{ deep: true }
	);
	watch(
		() => props.endValue,
		() => {
			_endValue.value = props.endValue;
			if (props.modelValue && props.endValue && props.isQuantum) {
				_strvalue.value = DayJs(props.modelValue).format(props.showDateFormat ? props.showDateFormat : 'YYYY年MM月DD日');
				let strVal = DayJs(props.modelValue).format('HH:mm') + '~' + DayJs(props.endValue).format('HH:mm');
				_timevalue.value = strVal;
			} else {
				if (props.modelValue) {
					_strvalue.value = DayJs(props.modelValue).format(props.showFormat ? props.showFormat : 'YYYY年MM月DD日 HH:mm:ss');
				}

				_timevalue.value = '';
			}
		},
		{ deep: true }
	);
	function onclick(e : Array<string | number>) {
		emits('click', e);
	}
	function onclear() {
		_value.value = undefined;
		_strvalue.value = '';
		confirm('', '')
		emits('clear');
	}
	function confirm(val : any, str : any) {
		let retValue = val;
		if (props.model === 'prettyTime') {
			emits('update:modelStr', str);
			if (props.isQuantum) {
				emits('update:modelValue', val.begin);
				emits('update:endValue', val.end);
				retValue = val;
				if (str) {
					let [date, time] = str.split(' ');
					_strvalue.value = date;
					_timevalue.value = time;
				}
			} else {
				emits('update:modelValue', val.time);
				retValue = val;
				_strvalue.value = str;
			}

		} else {
			if (val && val.length > 0) {
				emits('update:modelStr', str);
				if (props.model === 'datetime') {
					emits('update:modelValue', val);
					retValue = val;
				} else {
					if (props.multiple || props.model == 'rang') {
						emits('update:modelValue', val);
						retValue = val;
					} else {
						if (props.model == 'time') {
							emits('update:modelValue', val);
							retValue = val;
						} else {
							emits('update:modelValue', val[0]);
							retValue = val[0];
						}
					}
				}


				_strvalue.value = str;
			} else {
				emits('update:modelStr', '');
				emits('update:modelValue', '');
				_strvalue.value = '';
			}
		}
		setTimeout(() => {
			emits('confirm', retValue, str);
		}, 50);
	}
</script>

<style></style>